<template>
  <view class="wrap">
    <uv-line hairline></uv-line>
    <view class="list" v-if="!showLeng">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="left">
          <avatar :src='setUrl(item.user.avatar)' styles='width: 70rpx; height: 70rpx'></avatar>
          <view class="name">{{ item.user.nickname }}</view>
        </view>
        <view class="right" :class="{ red: item.is_follow == 0 }" @click="followUser(item)">{{ item.is_follow == 0 ? '未关注' : '已关注' }}</view>
      </view>
    </view>
    <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { post } from '@/api';
import { setUrl, loading } from '@/common';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

let way = '';
let userId = '';
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

onLoad((option) => {
  way = Number(option.id);
  userId = Number(option.userId);
  uni.setNavigationBarTitle({
  	title: way == 1 ? '我关注的人' : '关注我的人'
  });
  getList();
})
// 下拉刷新
onPullDownRefresh(() => {
  page = 1
  list.value = [];
  getList();
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  loading();
  await getList();
  uni.hideLoading();
})

function getList(){
  const params = {
    page,
    limit,
    way,
    specify_user_id: userId
  };
  post('api/user_follow/followUserList', params).then(res => {
    const data = res.data;
    last_page = data.last_page;
    if(way == 1){
      data.data.forEach(e => {
        e.is_follow = 1;
      })
    }
    list.value = [...list.value, ...data.data];
    if(list.value.length){
      showLeng.value = false;
    }else{
      showLeng.value = true;
    }
  })
}
// 关注
function followUser(row){
  let follow = 0;
  const params = {
    follow_user_id: row.user.id,
    way: row.is_follow == 1 ? 2 : 1
  }
  post('api/user_follow/followUser', params).then(res => {
    if(res.code == 1){
      row.is_follow = row.is_follow == 1 ? 0 : 1;
    }
  })
}
</script>

<style lang="scss" scoped>
  .list{
    padding: 0 30rpx;
    padding-top: 20rpx;
    background-color: #fff;
    .item{
      padding: 40rpx 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right{
        width: 128rpx;
        height: 64rpx;
        line-height: 64rpx;
        background: #F5F5F5;
        border-radius: 64rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #B8B8B8;
        text-align: center;
        &.red{
          color: #FFFFFF;
          background-color: #E43222;
        }
      }
      .left{
        display: flex;
        align-items: center;
        .name{
          font-weight: 400;
          font-size: 32rpx;
          color: #2B2B2B;
          padding-left: 20rpx;
        }
      }
    }
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>